<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入jq -->
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <!-- 引入utils -->
    <script src="../../static/js/utils.js"></script>
    <!-- 引入vue -->
    <script src="../../static/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-color-picker__icon, .el-input, .el-textarea {
            display: inline-block;
            width: 300px;
        }
        #app{
            margin: auto;
        }

        .el-form{
            display: flex;
            flex-wrap: wrap;
            margin-left: 10%;
        }
        .el-p-hint{
            font-size: 30px;
            text-align: center;
            color: #8b74f1;
        }
        p{
            font-size: 18px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <p class="el-p-hint">请在下面输入您的客户的详细信息</p>
        <el-form :model="clientForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="2">
            <el-form-item label="客户编号">
                <el-input v-model="clientForm.clientnumber"></el-input>
            </el-form-item>
            <el-form-item label="客户名称" prop="clientname">
                <el-input v-model="clientForm.clientname"></el-input>
            </el-form-item>
            <el-form-item label="简介">
                <el-input v-model="clientForm.shortcut"></el-input>
            </el-form-item>
            <el-form-item label="客户经理" prop="clientmanager">
                <el-input v-model="clientForm.clientmanager"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="linkman">
                <el-input v-model="clientForm.linkman"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="phonenumber">
                <el-input v-model="clientForm.phonenumber"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码" prop="postalcode">
                <el-input v-model="clientForm.postalcode"></el-input>
            </el-form-item>
            <el-form-item label="客户地址" prop="clientaddress">
                <el-input v-model="clientForm.clientaddress"></el-input>
            </el-form-item>
            <el-form-item label="电子邮件" prop="email">
                <el-input v-model="clientForm.email"></el-input>
            </el-form-item>
            <el-form-item label="税号">
                <el-input v-model="clientForm.taxnumber"></el-input>
            </el-form-item>
            <el-form-item label="开户银行" prop="openbank">
                <el-select v-model="clientForm.openbank" placeholder="请选择开户银行">
                    <el-option label="邮政" value="邮政"></el-option>
                    <el-option label="工商" value="工商"></el-option>
                    <el-option label="农业" value="农业"></el-option>
                    <el-option label="建设" value="建设"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="银行账号" prop="bandnumber">
                <el-input v-model="clientForm.bandnumber"></el-input>
            </el-form-item>
            <el-form-item label="省份">
                <el-input v-model="clientForm.province"></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="clientForm.type" placeholder="请选择类型">
                    <el-option label="大型客户" value="大型客户"></el-option>
                    <el-option label="中型客户" value="中型客户"></el-option>
                    <el-option label="小型客户" value="小型客户"></el-option>
                    <el-option label="新客户" value="新客户"></el-option>
                    <el-option label="老客户" value="老客户"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="clientForm.remark"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="clientForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                var clientNameRules = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入客户名称'));
                    } else {
                        if (value.length < 2 || value.length > 20) {
                            callback(new Error('长度在 3 到 20 个字符'));
                        }else {
                            let _this = this;
                            selectAjax("POST","/clienttable/queryByClientName",{clientName:_this.clientForm.clientname},(data)=>{
                                console.log(data.msg)
                                if (data.msg == "该客户已存在")
                                    callback(new Error(data.msg));
                                else{
                                    callback();
                                }
                            })
                        }
                    }
                };
                return{
                    clientname:'',
                    clientForm:{
                        clientnumber:'',
                        clientname:'',
                        shortcut:'',
                        clientmanager:'',
                        linkman:'',
                        phonenumber:'',
                        postalcode:'',
                        clientaddress:'',
                        email:'',
                        taxnumber:'',
                        openbank:'',
                        bandnumber:'',
                        province:'',
                        type:'',
                        remark:''
                    },
                    rules:{
                        clientname: [
                            { required: true, validator: clientNameRules, trigger: 'blur' }
                        ],
                        clientmanager: [
                            { required: true, message: '请输入客户经理', trigger: 'blur' },
                            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                        ],
                        linkman: [
                            { required: true, message: '请输入联系人', trigger: 'blur' },
                            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                        ],
                        phonenumber: [
                            { required: true, message: '请输入手机号码', trigger: 'blur' },
                            { required: true, pattern:/^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
                        ],
                        postalcode: [
                            { required: true, message: '请输入邮政编码', trigger: 'blur' },
                            { required: true, pattern:/[1-9]{1}(\d+){5}/, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                        ],
                        clientaddress: [
                            { required: true, message: '请输入客户地址', trigger: 'blur' }
                        ],
                        email: [
                            { required: true,message: '请输入邮箱地址', trigger: 'blur'  },
                            { type: 'email',pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/, message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                        ],
                        openbank: [
                            { required: true, message: '请选择开户银行', trigger: 'change' }
                        ],
                        bandnumber: [
                            { required: true, message: '请输入银行账号', trigger: 'blur' },
                            { required: true, pattern:/^\d{11}$/, message: '必须为11位', trigger: 'blur' }
                        ]
                    }
                }
            },
            methods:{
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            addOrUpdateAjax("POST","/clienttable/add",this.clientForm,(data)=>{
                                alert("添加成功")
                                this.clientForm = "";
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },
                open2() {
                    this.$notify({
                        title: '提示',
                        message: '注意：带*号的必须填入',
                        duration: 0
                    });
                }
            },
            mounted(){
                this.open2();
            }
        })
    </script>
</body>
</html>